/**
 * Description
 *
 * Creation Date 26/12/2017
 * @author Candy
 */
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { is, fromJS} from 'immutable';
import Template from '../../component/Template';
import { getHomeBanner } from '../../api/index';
import SwipeComponent from '../../component/Swiper';
import HeaderNav from '../../component/HeaderNav';
import ProductList from '../../component/ProductList';
import BrandList from './BrandList';

class Home extends Component {
	constructor(props) {
		super(props);
		this.state = {
			bannerList: []
		}
	}

	componentWillMount() {
	}

	componentWillUpdate(nextProps, nextState) {
		if(this.props !== nextProps) {
			this.setState({ bannerList: nextProps.state.get('data')})
		}
	}

	shouldComponentUpdate(nextProps, nextState) {
		return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
	}

	render() {
		return (
			<div>
				<HeaderNav title="home" />
				{
					this.state.bannerList && this.state.bannerList.length > 0 &&
					<SwipeComponent dataList={this.state.bannerList} />
				}
				<BrandList/>

				<h2 className="title">Top sales</h2>
				<ProductList/>
			</div>
		)
	}
}

export default Template({
	id: 'home',
	component: Home,
	url: '/v3/banners',
	data: {}
});